<template>
  <div class="theme-toggle" v-if="showToggle">
    <button
      class="toggle-btn"
      @click="toggleTheme"
      :title="`切换到${nextTheme}主题`"
    >
      <span class="theme-icon">{{ currentThemeIcon }}</span>
      <span class="theme-name">{{ currentThemeDisplayName }}</span>
    </button>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import ThemeService from '../core/ThemeService.js'

// Props
const props = defineProps({
  showToggle: {
    type: Boolean,
    default: true
  }
})

// 状态
const themeService = ThemeService
const currentTheme = ref('')

// 计算属性
const themeConfig = {
  'default': { icon: '🎨', name: '默认' },
  'ai-naming': { icon: '✨', name: '起名' },
  'office-pdf': { icon: '📄', name: '文档' },
  'ai-bot': { icon: '🤖', name: '机器人' }
}

const themes = computed(() => themeService.getThemes())
const nextThemeIndex = computed(() => {
  const themeNames = themes.value
  const currentIndex = themeNames.indexOf(currentTheme.value)
  return (currentIndex + 1) % themeNames.length
})
const nextTheme = computed(() => themes.value[nextThemeIndex.value])
const currentThemeIcon = computed(() => themeConfig[currentTheme.value]?.icon || '🎨')
const currentThemeDisplayName = computed(() => themeConfig[currentTheme.value]?.name || '未知')

// 方法
function toggleTheme() {
  themeService.cycleTheme()
  currentTheme.value = themeService.getCurrentTheme()
}

function updateTheme() {
  currentTheme.value = themeService.getCurrentTheme()
}

// 生命周期
onMounted(() => {
  themeService.initialize()
  updateTheme()

  // 监听主题变化
  document.addEventListener('themeChanged', updateTheme)
})

// 清理
onBeforeUnmount(() => {
  document.removeEventListener('themeChanged', updateTheme)
})
</script>

<style scoped>
.theme-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--primary);
  border-radius: 2rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.theme-icon {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .theme-toggle {
    bottom: 1rem;
    right: 1rem;
  }

  .toggle-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  .theme-icon {
    font-size: 1rem;
  }
}
</style>